<template>
  <div>
    <el-main class="main">
      <div>
        <el-row>
          <el-col :span="8">
            <div class="env-appraise">
              <div class="title">环境评价</div>
              <div class="content">
                <div class="text">
                  <span v-if="evaluateObj.comment&&evaluateObj.comment.length>0">
                    <span v-for="(item,index) in evaluateObj.comment"
                          :key="index">{{item}}</span>
                  </span>
                  <span v-else>当前的环境质量各项指数均在标准范围之内，环境等级为优良，请继续保持！</span>
                </div>
                <div>
                  <div class="evaluate-text">{{evaluateObj.evaluate|evaluateFil()}}</div>
                  <!-- <el-image :src="require('@/assets/platformDetail/great.png')"></el-image> -->
                </div>
              </div>
            </div>
            <over-view style="margin-top:15px;"
                       :deviceId="deviceId"></over-view>
            <risk-statistics style="margin-top:15px;"
                             :platformId="platformId"></risk-statistics>
            <warning-info style="margin-top:15px;"
                          :alertData="alertData"
                          :platformId="platformId"></warning-info>
          </el-col>
          <el-col :span="16"
                  style="padding-left:15px">
            <env-compliance :platformId="platformId"></env-compliance>
            <map-info style="margin-top:15px;"
                      :deviceId="deviceId"
                      @selectLocationIdFun="selectLocationIdFun"
                      :allDeviceData="allDeviceData"
                      :platformId="platformId"></map-info>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script>
import MapInfo from "./components/mapInfo/index";
import WarningInfo from "./components/warningInfo";
import OverView from "./components/overView";
import RiskStatistics from "./components/riskStatistics";
import EnvCompliance from "./components/envCompliance/index";
import { getAllDeviceData, getDeviceEvaluate } from "@/api/platformManage";
import store from "@/store/modules/user"
export default {
  name: "warningDevice",
  components: {
    WarningInfo,
    MapInfo,
    OverView,
    RiskStatistics,
    EnvCompliance
  },
  data() {
    return {
      chart: null,
      platformId: "",
      platformName: "",
      platformLogo: "",
      selectDeviceIndex: 0,
      deviceId: "",
      deviceName: "",
      alertData: [],
      allDeviceData: [],
      onlineData: [],
      timer: null,
      evaluateObj: {},
      evaluateList: [//左上角单点评价 GREAT 优，GOOD 良，OK 中，BAD 差
        {
          code: 'GREAT',
          lable: '优'
        },
        {
          code: 'GOOD',
          lable: '良'
        },
        {
          code: 'OK',
          lable: '中'
        },
        {
          code: 'BAD',
          lable: '差'
        },
      ]
    };
  },
  filters: {
    evaluateFil(val) {
      switch (val) {
        case 'GREAT':
          return '优';
        case 'GOOD':
          return '良';
        case 'OK':
          return '中';
        case 'BAD':
          return '差';
      }
    }
  },
  watch: {
    deviceId() {
      this.getDeviceEvaluateFun();
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart();
    // });
    if (this.$route.query.platformId) {
      this.platformId = this.$route.query.platformId;
      this.platformName = this.$route.query.name;
      this.platformLogo = this.$route.query.logo;
      this.$store.commit("user/selectProjectMuts", {
        id: this.platformId,
        name: this.platformName,
        logo: this.platformLogo
      });
    } else {
      var selectProject = JSON.parse(localStorage.getItem('selectProject'));
      this.platformId = selectProject.id;
      this.platformName = selectProject.name;
      this.platformLogo = selectProject.logo;
    }
    this.getAllDeviceFun();
  },
  unmounted() {
    clearInterval(this.timer);
  },
  methods: {
    getDeviceEvaluateFun() {
      getDeviceEvaluate(this.deviceId).then(res => {
        this.evaluateObj = res.value;

      })
    },
    getAllDeviceFun() {
      getAllDeviceData(this.platformId).then(res => {
        let data = res.value;
        this.allDeviceData = data;
        //this.alertData = [{"deviceId":"73121","name":"73121","address":"","level":"LEVEL_C","alert":false,"state":"ONLINE","data":{"PM25":{"val":7.0,"evaluate":{"healthLevelShow":"优","level":"LEVEL_D","alert":true}},"CO2":{"val":105.0,"evaluate":{"healthLevelShow":"非常清新","level":"LEVEL_A","alert":false}},"HUMIDITY":{"val":53.4,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":true}},"TEMPERATURE":{"val":24.73,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":true}},"LUX":{"val":280.0,"evaluate":null}}},{"deviceId":"23766","name":"23766","address":"","level":"LEVEL_B","alert":false,"state":"ONLINE","data":{"PM25":{"val":120.0,"evaluate":{"healthLevelShow":"良","level":"LEVEL_B","alert":false}},"CO2":{"val":514.0,"evaluate":{"healthLevelShow":"清新","level":"LEVEL_B","alert":false}},"HUMIDITY":{"val":60.3,"evaluate":{"healthLevelShow":"微湿","level":"LEVEL_B","alert":false}},"TEMPERATURE":{"val":23.85,"evaluate":{"healthLevelShow":"偏冷","level":"LEVEL_B","alert":false}},"LUX":{"val":152.0,"evaluate":null}}},{"deviceId":"23785","name":"23785","address":"","level":"LEVEL_B","alert":false,"state":"ONLINE","data":{"PM25":{"val":220.0,"evaluate":{"healthLevelShow":"轻度污染","level":"LEVEL_C","alert":false}},"CO2":{"val":504.0,"evaluate":{"healthLevelShow":"较清新","level":"LEVEL_C","alert":false}},"HUMIDITY":{"val":56.2,"evaluate":{"healthLevelShow":"高湿","level":"LEVEL_C","alert":false}},"TEMPERATURE":{"val":23.79,"evaluate":{"healthLevelShow":"偏热","level":"LEVEL_B","alert":true}},"LUX":{"val":65.0,"evaluate":null}}},{"deviceId":"24270","name":"24270","address":"","level":"LEVEL_B","alert":false,"state":"ONLINE","data":{"PM25":{"val":300,"evaluate":{"healthLevelShow":"中度污染","level":"LEVEL_D","alert":false}},"CO2":{"val":1000.0,"evaluate":{"healthLevelShow":"较浑浊","level":"LEVEL_D","alert":false}},"HUMIDITY":{"val":53.9,"evaluate":{"healthLevelShow":"干燥","level":"LEVEL_C","alert":false}},"TEMPERATURE":{"val":24.51,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"LUX":{"val":172.0,"evaluate":null}}},{"deviceId":"26034","name":"26034","address":"","level":"LEVEL_B","alert":false,"state":"ONLINE","data":{"PM25":{"val":700.0,"evaluate":{"healthLevelShow":"重度污染","level":"LEVEL_E","alert":false}},"CO2":{"val":2500.0,"evaluate":{"healthLevelShow":"浑浊","level":"LEVEL_E","alert":false}},"HUMIDITY":{"val":53.3,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"TEMPERATURE":{"val":25.11,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"LUX":{"val":1790.0,"evaluate":null}}},{"deviceId":"30887","name":"30887","address":"","level":"LEVEL_B","alert":false,"state":"ONLINE","data":{"PM25":{"val":800.0,"evaluate":{"healthLevelShow":"严重污染","level":"LEVEL_F","alert":false}},"CO2":{"val":3000.0,"evaluate":{"healthLevelShow":"非常浑浊","level":"LEVEL_F","alert":false}},"HUMIDITY":{"val":55.5,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"TEMPERATURE":{"val":24.43,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"LUX":{"val":109.0,"evaluate":null}}},{"deviceId":"37444","name":"37444","address":"","level":"LEVEL_B","alert":false,"state":"ONLINE","data":{"PM25":{"val":6.0,"evaluate":{"healthLevelShow":"优","level":"LEVEL_A","alert":false}},"CO2":{"val":748.0,"evaluate":{"healthLevelShow":"非常清新","level":"LEVEL_A","alert":false}},"HUMIDITY":{"val":58.9,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"TEMPERATURE":{"val":24.7,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"LUX":{"val":660.0,"evaluate":null}}},{"deviceId":"42543","name":"42543","address":"","level":"LEVEL_B","alert":false,"state":"ONLINE","data":{"PM25":{"val":8.0,"evaluate":{"healthLevelShow":"优","level":"LEVEL_A","alert":false}},"CO2":{"val":505.0,"evaluate":{"healthLevelShow":"非常清新","level":"LEVEL_A","alert":false}},"HUMIDITY":{"val":55.8,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"TEMPERATURE":{"val":25.15,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"LUX":{"val":35.0,"evaluate":null}}},{"deviceId":"21894","name":"21894","address":"","level":"LEVEL_A","alert":false,"state":"ONLINE","data":{"PM25":{"val":6.0,"evaluate":{"healthLevelShow":"优","level":"LEVEL_A","alert":false}},"CO2":{"val":412.0,"evaluate":{"healthLevelShow":"非常清新","level":"LEVEL_A","alert":false}},"HUMIDITY":{"val":52.8,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"TEMPERATURE":{"val":24.98,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"LUX":{"val":435.0,"evaluate":null}}},{"deviceId":"22453","name":"22453","address":"","level":"LEVEL_A","alert":false,"state":"ONLINE","data":{"PM25":{"val":4.0,"evaluate":{"healthLevelShow":"优","level":"LEVEL_A","alert":false}},"CO2":{"val":487.0,"evaluate":{"healthLevelShow":"非常清新","level":"LEVEL_A","alert":false}},"HUMIDITY":{"val":63.5,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"TEMPERATURE":{"val":22.63,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"LUX":{"val":320.0,"evaluate":null}}},{"deviceId":"28997","name":"28997","address":"","level":"LEVEL_A","alert":false,"state":"ONLINE","data":{"PM25":{"val":5.0,"evaluate":{"healthLevelShow":"优","level":"LEVEL_A","alert":false}},"CO2":{"val":418.0,"evaluate":{"healthLevelShow":"非常清新","level":"LEVEL_A","alert":false}},"HUMIDITY":{"val":60.1,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"TEMPERATURE":{"val":24.42,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"LUX":{"val":809.0,"evaluate":null}}},{"deviceId":"29194","name":"29194","address":"","level":"LEVEL_A","alert":false,"state":"ONLINE","data":{"PM25":{"val":10.0,"evaluate":{"healthLevelShow":"优","level":"LEVEL_A","alert":false}},"CO2":{"val":459.0,"evaluate":{"healthLevelShow":"非常清新","level":"LEVEL_A","alert":false}},"HUMIDITY":{"val":56.7,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"TEMPERATURE":{"val":22.93,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"LUX":{"val":0.0,"evaluate":null}}},{"deviceId":"33005","name":"33005","address":"","level":"LEVEL_A","alert":false,"state":"ONLINE","data":{"PM25":{"val":10.0,"evaluate":{"healthLevelShow":"优","level":"LEVEL_A","alert":false}},"CO2":{"val":488.0,"evaluate":{"healthLevelShow":"非常清新","level":"LEVEL_A","alert":false}},"HUMIDITY":{"val":57.1,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"TEMPERATURE":{"val":25.29,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"LUX":{"val":795.0,"evaluate":null}}},{"deviceId":"51829","name":"51829","address":"","level":"LEVEL_A","alert":false,"state":"ONLINE","data":{"PM25":{"val":5.0,"evaluate":{"healthLevelShow":"优","level":"LEVEL_A","alert":false}},"CO2":{"val":488.0,"evaluate":{"healthLevelShow":"非常清新","level":"LEVEL_A","alert":false}},"HUMIDITY":{"val":60.7,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"TEMPERATURE":{"val":24.57,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"LUX":{"val":213.0,"evaluate":null}}},{"deviceId":"74145","name":"74145","address":"","level":"LEVEL_A","alert":false,"state":"ONLINE","data":{"PM25":{"val":10.0,"evaluate":{"healthLevelShow":"优","level":"LEVEL_A","alert":false}},"CO2":{"val":487.0,"evaluate":{"healthLevelShow":"非常清新","level":"LEVEL_A","alert":false}},"HUMIDITY":{"val":49.5,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"TEMPERATURE":{"val":26.21,"evaluate":{"healthLevelShow":"适宜","level":"LEVEL_A","alert":false}},"LUX":{"val":289.0,"evaluate":null}}}];
        this.alertData = data.filter(e => {
          if (e.data != null) {
            return e.alert == true;
          }
        });
        this.onlineData = data.filter(e => {
          if (e.state == "ONLINE") {
            return e;
          }
        });
        this.selectDeviceIndex = 0;
        this.deviceId = this.onlineData[0].deviceId;
        this.deviceName = this.onlineData[0].name;
      });
      //定时器轮播设备
      this.timer = setInterval(() => {
        if (this.selectDeviceIndex < this.onlineData.length - 2) {
          this.selectDeviceIndex++;
          this.deviceId = this.onlineData[this.selectDeviceIndex].deviceId;
          this.deviceName = this.onlineData[this.selectDeviceIndex].name;
        } else {
          this.selectDeviceIndex = 0;
          this.deviceId = this.onlineData[0].deviceId;
          this.deviceName = this.onlineData[0].name;
        }
      }, 1000 * 60);
    },
    selectLocationIdFun(item) {
      this.deviceId = item.id;
      this.deviceName = item.name;
    }
  }
};
</script>
<style>
body {
  background-color: #edf0f3;
  font-family: Segoe UI;
}
.header {
  height: 59px;
  width: 100%;
  background-color: #2d9dff;
}
</style>
<style lang="scss" scoped>
.main {
  padding: 15px 15px 0 15px !important;
  box-sizing: content-box;
}
.env-appraise {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  .title {
    font-size: 16px;
    font-weight: bold;
    line-height: 21px;
    color: #0a0a0a;
  }
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .text {
      font-size: 16px;
      font-weight: 400;
      line-height: 21px;
      color: #535353;
      margin-right: 20px;
    }
  }
}
.evaluate-text {
  background-image: url("../../../../assets/platformDetail/great.png");
  min-width: 150px;
  min-height: 100px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
  padding-top: 40px;
  font-weight: bold;
  font-size: 30px;
}
</style>
